{% extends 'web/layout/manage.html' %}
{% load static %}
{% load issues_tag %}
{% block title %}Issues{% endblock title %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/editor-md/css/editormd.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/editor-md/css/editormd.preview.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/dist/css/bootstrap-datepicker.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-select/css/bootstrap-select.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/select2/css/select2.min.css' %}">
<style>
    
    .panel-default{
        margin-top:10px;
    }
    .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
    .panel-body{
        padding:0px;
    }
    .title_list{
        border-right:1px solid #dddddd;
    }
    .content{
        border-left:1px solid #dddddd;
        margin-left: -1px;
    }
    .editormd-fullscreen{
            z-index: 1001;
        }

    .editormd{
            margin-bottom: 0px;
        }


   

    .error-msg {
        color: red;
        position: absolute;     
        font-size: 12px; 
    }

    /* 筛选 */
        .filter-area .item {
            margin-bottom: 15px;
        }

        .filter-area .item .title {
            padding: 5px 0;
        }

        .filter-area .item .check-list a {
            text-decoration: none;
            display: inline-block;
            min-width: 65px;
        }

        .filter-area .item .check-list label {
            font-weight: 200;
            font-size: 13px;
            margin-left: 3px;
        }

        .filter-area .item .check-list a:hover {
            font-weight: 300;
        }

        .filter-area .item .check-list .cell {
            margin-right: 10px;
        }

    .others {
        margin-bottom:0px;
    }

</style>
{% endblock css %}
{% block content %}

<!-- panel -->
<div class="container-fluid bs-example" >    <!-- container-fluid -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <div>
                <a href="{% url 'web:files' project_id=request.tracer.project.id %}">问题<a>
            </div>        
            <div>
                
                <!-- Modal Button-->
                <div class="function">
                        <a class="btn btn-success btn-xs" data-toggle="modal" data-target="#addIssueModal" >
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>  新建问题
                        </a>
                        <a class="btn btn-success btn-xs" data-toggle="modal" data-target="#addAttentionModal" >
                            <i class="fa fa-user-plus" aria-hidden="true"></i> 邀请成员
                        </a>
                </div>

                <!-- Modal new issue-->
                <div class="modal fade bs-example" id="addIssueModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">新建问题</h4>

                            </div>
                            <div class="modal-body">
                            
                                <form id="issueForm" class="form-horizontal"method="POST" >
                                    {% csrf_token %}

                                    <div class="form-group">
                                        <label for="{{ form.issues_type.id_for_label}}" class="col-md-2 control-label">{{form.issues_type.label}}</label>
                                        <div class="col-md-10">
                                            <div>{{form.issues_type}}</div>
                                            <div class="error-msg"></div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="{{ form.subject.id_for_label}}" class="col-md-2 control-label">{{form.subject.label}}</label>
                                        <div class="col-md-10">
                                            <div>
                                                {{form.subject}}
                                            </div>
                                            <div class="error-msg"></div>
                                        </div>
                                        
                                    </div>

                                    <div class="form-group">
                                        <label for="{{ form.module.id_for_label}}" class="col-md-2 control-label">{{form.module.label}}</label>
                                        <div class="col-md-10">
                                            <div>{{form.module}}</div>
                                            <div class="error-msg"></div>
                                        </div>
                                    </div>
                
                                    <div class="form-group">
                                        <label for="{{ form.desc.id_for_label}}" class="col-md-2 control-label">{{form.desc.label}}</label>
                                        <div class="col-md-10">
                                            
                                            <div id='id_editor'>{{form.desc}}</div>
                                            <div class="error-msg"></div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="{{ form.status.id_for_label}}" class="col-md-2 control-label">{{form.status.label}}</label>
                                        <div class="col-md-4">
                                            <div>{{form.status}}</div>
                                            <div class="error-msg"></div>
                                        </div>
                                        <label for="{{ form.priority.id_for_label}}" class="col-md-2 control-label">{{form.priority.label}}</label>
                                        <div class="col-md-4">
                                            <div>{{form.priority}}</div>
                                            <div class="error-msg"></div>
                                        </div>
                                    </div>
 
                                    <div class="form-group">
                                        <label for="{{ form.assign.id_for_label}}" class="col-md-2 control-label">{{form.assign.label}}</label>
                                        <div class="col-md-4">
                                            {{form.assign}}
                                            <div class="error-msg"></div>
                                        </div>
                                        <label for="{{ form.attention.id_for_label}}" class="col-md-2 control-label">{{form.attention.label}}</label>
                                        <div class="col-md-4">
                                            {{form.attention}}
                                            <div class="error-msg"></div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="{{ form.start_date.id_for_label}}" class="col-md-2 control-label">{{form.start_date.label}}</label>
                                        <div class="col-md-4">
                                            <div>{{form.start_date}}</div>
                                            <div class="error-msg"></div>
                                        </div>
                                        <label for="{{ form.end_date.id_for_label}}" class="col-md-2 control-label">{{form.end_date.label}}</label>
                                        <div class="col-md-4">
                                            <div>{{form.end_date}}</div>
                                            <div class="error-msg"></div>
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label for="{{ form.mode.id_for_label}}" class="col-md-2 control-label">{{form.mode.label}}</label>
                                        <div class="col-md-4">
                                            <div>{{form.mode}}</div>
                                            <div class="error-msg"></div>
                                        </div>
                                        <label for="{{ form.parent.id_for_label}}" class="col-md-2 control-label">{{form.parent.label}}</label>
                                        <div class="col-md-4">
                                            {{form.parent}}
                                            <div class="error-msg"></div>
                                        </div>
                                    </div>
                                                                
                                </form>
                            </div>
                            <div class="modal-footer">

                                
                                <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">关 闭</button>
                                <button id="btnFormSubmit" type="button" class="btn btn-primary btn-xs" onclick = "submitForm();">提 交</button>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal End -->

                <!-- Modal invite attention-->
                <div class="modal fade bs-example" id="addAttentionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h5 class="modal-title" id="myModalLabel">邀请码</h5>

                            </div>
                            <div class="modal-body">
                            
                                <form id="inviteForm" class="form-horizontal"method="POST" >
                                    {% csrf_token %}

                                    <div class="form-group">

                                        <label for="{{ project_invite_form.period.id_for_label}}" class="col-md-2 control-label">{{project_invite_form.period.label}}</label>
  
                                        <div class="col-md-10">
                                            <div>{{project_invite_form.period}}</div>
                                            <div class="error-msg"></div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="{{ project_invite_form.count.id_for_label}}" class="col-md-2 control-label">{{project_invite_form.count.label}}</label>
                                        <div class="col-md-10">
                                            <div>
                                                {{project_invite_form.count}}
                                            </div>
                                            <div class="error-msg"></div>
                                        </div>
                                        
                                    </div>
                
                                </form>
                            <button id="btnInviteSubmit" type="button" class="btn btn-success btn" onclick = "submitInviteForm();">生成邀请码</button>
                            </div>
                            <div id='inviteDisplay' class="modal-footer hide">
                            
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <input type="button" value="邀请链接" class="btn btn-default">
                                        </div>
                                        <input type="text" class="form-control" id="inviteUrl">
                                        <div class="input-group-btn">
                                            <input type="button" value="复制链接" class="btn btn-primary" id="btnCopyUrl">
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal End -->

            </div>
        </div>
        <!-- panel body -->
        <div class="panel-body">
            
            <div class="col-sm-3 title_list filter-area">
            
                {% for field in issue_filter_list%}
                <div class='item'>
                    <div class='title'>{{field.title}}:</div>
                    <div class='check-list'>
                        {% for row in field.filter %}
                            {{row}}
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
                
            </div>
            <div class="col-sm-9 content" >
                
                {% for field in issues_object_list  %}
                    <table class="table">
                        <tbody>
                        <tr>
                            <td class='number'>
                                <i class="fa fa-circle text-{{ field.priority }}"></i>
                                <a target='_blank' href={% url 'web:issue_detail' project_id=request.tracer.project.id issue_id=field.id %}>{% adjust_id field.id %}</a>
                            </td>
                            <td class='issue'>
                                
                                <div>
                                    <a target='_blank' href={% url 'web:issue_detail' project_id=request.tracer.project.id issue_id=field.id %}>{{field.subject}} </a>
                                </div>
                                <div class='tag'>
                                    
                                    <span class='others'>
                                        {{field.issues_type.title}}
                                    </span>
                                    <span>
                                        <i class="fa fa-hand-o-right" aria-hidden="true"></i>
                                        {{field.assign.username}}
                                    </span>
                                    <span>{{field.status}}</span>
                                    <span>
                                        <i class="fa fa-user-o" aria-hidden="true"></i>
                                        {{field.creator.username}}
                                    </span>
                                    <span>{{field.end_date}}</span>
                                    <span>{{field.latest_update_datetime}}</span>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                {% endfor %}
            
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        {{ page_html|safe }}
                    </ul>
                </nav>
            </div>
                
        </div>
    </div>
<div>




{% endblock content %}
{% block js %}
    <script src="{% static 'plugins/editor-md/editormd.min.js' %}"></script>
    <script src="{% static 'plugins/dist/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'plugins/dist/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
    
    <script src="{% static 'plugins/bootstrap-select/js/bootstrap-select.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-select/js/i18n/defaults-zh_CN.min.js' %}"></script>
    <script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>
    <script src="{% static 'plugins/select2/js/i18n/zh-CN.js' %}"></script>
    <script>
        $(function () {
                $('.error-msg').empty();
                //initEditorMd();
                bindBootStrapShownEvent();
                initDatePicker();
                bindClickCheckFilter();
                initSelect2();
                bindCopyUrl();
            });
        /*
        点击拷贝邀请码
        */
        function bindCopyUrl() {
            $('#btnCopyUrl').click(function () {
                var textInput = $('#inviteUrl')[0]; // document.getElementById('inviteUrl')
                textInput.select();

                document.execCommand("Copy");
                //alert('复制成功');
            })
        }

        
        function submitInviteForm(){
            $('#inviteDisplay').addClass('hide');
            //var nm1=$('input[name="inputname"]').val();
            //var var_nm1 = $.cookie('csrftoken');
            //var id_user = $('#id_user').val();
                $.ajax({
                    url:"{% url 'web:invite_url' project_id=request.tracer.project.id %}", //to any url
                    //url: '/csrf1.html',
                    type: 'POST',
                    headers:{'X-CSRFToken':'{{csrf_token}}'},
                    //data: { "id_user":id_user},
                    data:$('#inviteForm').serialize(),
                    //data: JSON.stringfy(postDict),
                    dataType: 'JSON',
                    success:function(arg){
                        console.log(arg);
                        if (arg.status){
                            $('#inviteUrl').val(arg.msg);
                            $('#inviteDisplay').removeClass('hide');

                        }else{
                            $.each(res.error, function (k, v) {
                                $('#id_' + k).next('.error-msg').text(v[0]);
                            })
                        }
                    }
                })
        }
        



        /* 应用select2样式给筛选框*/
        function initSelect2(){
            $('.select2').select2({}).on('select2:select', function(e){
                //选中后触发事件
                //console.log(e.params.data)
                location.href = e.params.data.id;
            }).on('select2:unselect', function(e){
                //移除后触发某些事件
                location.href = e.params.data.id;
            });
        }


        /*给checkbox绑定href跳转*/        
        function bindClickCheckFilter(){
            $('.filter-area').find(':checkbox').click(function(){
                location.href = $(this).parent().attr('href')       
            })
        }

        /*
        添加对话框：初始化时间选择
         */
        function initDatePicker() {
            $('#id_start_date,#id_end_date').datepicker({
                format: 'yyyy-mm-dd',
                startDate: '0',
                language: "zh-CN",
                autoclose: true
            });
        }

        function initEditorMd(){
            if ($('#id_editor').length > 0) {
                var editor = editormd("id_editor", {
                    height:200,
                    //height:"100%",
                    placeholder:"请输入内容",
                    path:"{% static 'plugins/editor-md/lib/' %}",
                    imageUpload:true,				//使能图片上传
                    imageFormats:["jpg",'jpeg','png','gif'],		//图片格式
                    imageUploadURL: "{% url 'web:wiki_upload' project_id=request.tracer.project.id %}" //图片上传地址

                });
            }
        }

        function bindBootStrapShownEvent() {
            $('#addIssueModal').on('shown.bs.modal', function (event) {
                // 对话框弹出时，内容触发。
                initEditorMd();
            })
        }


        function submitForm(){
            //var nm1=$('input[name="inputname"]').val();
            //var var_nm1 = $.cookie('csrftoken');
            //var id_user = $('#id_user').val();
                $.ajax({
                    url:"{% url 'web:issues' project_id=request.tracer.project.id %}", //to any url
                    //url: '/csrf1.html',
                    type: 'POST',
                    headers:{'X-CSRFToken':'{{csrf_token}}'},
                    //data: { "id_user":id_user},
                    data:$('#issueForm').serialize(),
                    dataType: 'JSON',
                    success:function(arg){
                        console.log(arg);

                        if(arg.status){
                            location.href = location.href;
                        }else{
                            $.each(arg.msg,function(key,value){		//对arg.msg进行循环
                                console.log(key,value);
                                $("#id_" + key).parent().next('.error-msg').text(value[0]);
                                }
                            )
                        }

                    }
                })
        }


</script>

{% endblock js %}